@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn-custom {
        @apply select-none rounded-md border border-transparent px-3 py-1.5 text-base font-medium  hover:border-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2;
    }

    .btn-close,
    .btn-min {
        @apply rounded-full p-2 px-3.5 font-bold text-black hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-700;
    }

    .history-hover {
        @apply transition-all duration-300 ease-in-out rounded-lg bg-gray-100 shadow-md hover:bg-gray-200;
    }

    .history-hover:hover {
        @apply scale-110 bg-gray-200 dark:bg-gray-800;
    }

    .side-item {
        @apply transition-all duration-300 ease-in-out ml-4 block w-[80%] rounded-lg border px-4 py-2 text-start;
    }

    .side-item:hover {
        @apply scale-110 bg-gray-200 dark:bg-gray-800;
    }

    .side-item:focus {
        @apply outline-none ring-2 ring-primary-500 dark:ring-primary-300;
    }

    .side-item-active {
        @apply bg-primary-600 text-white dark:bg-primary-700;
    }

    .person-dropdown {
        @apply menu menu-sm dropdown-content bg-base-100 z-[1] rounded-box mt-14 w-24 p-2 shadow items-center;
    }

    .movie-card {
        @apply transition-all duration-300 ease-in-out rounded-lg bg-gray-100 shadow-md;
    }

    .movie-card:hover {
        @apply scale-110 bg-gray-200 dark:bg-gray-800;
    }

    .error-href {
        @apply mt-4 inline-block px-6 py-3 bg-white text-cyan-500 font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-cyan-100 hover:shadow-lg focus:bg-cyan-100 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-cyan-200 active:shadow-lg transition duration-150 ease-in-out;
    }

    .error-href-302 {
        @apply mt-8 inline-block px-6 py-3 bg-white text-purple-500 font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-purple-100 hover:shadow-lg focus:bg-purple-100 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-200 active:shadow-lg transition duration-150 ease-in-out;
    }

    .error-href-404 {
        @apply mt-4 inline-block px-6 py-3 bg-white text-purple-500 font-medium text-lg leading-tight uppercase rounded shadow-md hover:bg-purple-100 hover:shadow-lg focus:bg-purple-100 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-200 active:shadow-lg transition duration-150 ease-in-out;
    }

    .error-href-500 {
        @apply btn btn-primary mt-10 btn-xs sm:btn-sm md:btn-md lg:btn-lg text-gray-300;
    }
}
